/**
 * 电影
 *
 * @author li.youxi
 * @date 2017/06/02
 */

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

import './index.scss'

export default class Movie extends Component {
	state = {
		canvas: {
			ctx: null,
			winWidth: 0,
			winHeight: 0
		}
	}
	componentDidMount(){
		this.drawInit();
	}
	drawInit(){
		const canvas = ReactDOM.findDOMNode(this.refs.moviecanvas),			  
			  win = window;

		this.state.canvas.ctx = canvas.getContext('2d');
		this.state.canvas.winWidth = win.innerWidth,
		this.state.canvas.winHeight = win.innerHeight

		canvas.width = win.innerWidth;
		canvas.height = win.innerHeight;

		this.grid();
		//this.createDoit();

	}

	//画背景网格
	grid(){
		const canvas = this.state.canvas,
			step = 13,
			w = canvas.winWidth,
			h = canvas.winHeight;

		canvas.ctx.beginPath();

		for(var i = .5; i<w; i+=step) {
			canvas.ctx.moveTo(i, 0);
			canvas.ctx.lineTo(i, h);
		}

		for(var j=.5; j<h; j+=step) {
			canvas.ctx.moveTo(0, j);
			canvas.ctx.lineTo(w, j);
		}

		canvas.ctx.stroke();
	}

	createDoit(){
		//this.randomPixel();
		//requestAnimationFrame(this.createDoit);
	}

	randomPixel(){
		const canvas = this.state.canvas,
			  w = canvas.winWidth,
			  h = canvas.winHeight;

		const x = parseInt(Math.random()*w),
			  y = parseInt(Math.random()*h),
			  index = y*w + x,
			  p = index*4;

		const imageData = canvas.ctx.createImageData(w, h);

		imageData.data[p+0] = parseInt(Math.random()*256);
		imageData.data[p+1] = parseInt(Math.random()*256);
		imageData.data[p+2] = parseInt(Math.random()*256);
		imageData.data[p+3] = parseInt(Math.random()*256);

		canvas.ctx.putImageData(imageData, 0, 0);
	}

	render(){
		return (
			<div className="movie-wrapper">
				<canvas ref="moviecanvas" className="movie-canvas"></canvas>
			</div>
		)
	}
}



















